<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      placeholder="请输入物业名称"
      :pageInfo="pager"
      :listData="tableData"
      :selectData="selectDataArr"
      searchName="keyword"
      :menuList="['add','delete','export']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
      openSelection
    >
      <el-table ref="multipleTable" align="left" :data="tableData" @selection-change="$event => (selectDataArr = $event)">
        <el-table-column type="selection" width="55" />
        <el-table-column label="合同编号" width="200" prop="contractNo" show-overflow-tooltip/>
        <el-table-column label="物业名称" prop="propertyName" min-width="200" show-overflow-tooltip/>
        <el-table-column label="乙方单位名称" width="220" prop="unitName" show-overflow-tooltip/>
        <el-table-column label="合同类型" width="150" prop="contractType" :formatter="dataFormatter" />
        <el-table-column label="签订日期" width="180" prop="signingDate" :formatter="dataFormatter" />
        <el-table-column label="合同期限" width="220" prop="time" :formatter="dataFormatter" />
        <el-table-column label="操作" fixed="right" width="150" class="operaColumn">
          <template slot-scope="scope">
            <el-button type="text" style="--color:#666666" size="mini" @click="handleBtnClick('preview',scope.row)">查看</el-button>
            <el-button type="text" style="--color:#409EFF" size="mini" @click="handleBtnClick('edit',scope.row)">编辑</el-button>
            <el-button type="text" style="--color:#E6A23C" size="mini" @click="handleBtnClick('delete',scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <!-- 新增|编辑|查看 单位 -->
    <contractDialog ref="dialog" />
  </basic-container>
</template>

<script>
import { getContractList, deleteContract } from '@/views/wy-operate/api/payment.js'
import contractDialog from './contractDialog'
import { getDict } from '@/utils'
export default {
  components: {
    contractDialog
  },
  provide () {
    return {
      initList: this.queryData,
    };
  },
  beforeMount () {
    this.queryData();
  },
  data () {
    return {
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
        keyword: ''
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      // 筛选项
      filterList: [
        { label: '合同签订日期', inputType: 'daterange', name: ['signingDateStart', 'signingDateEnd'] },
        { label: '合同类型', inputType: 'dict', dictName: 'payment-contract-type', name: 'contractTypeList', multiple: true },
      ],
    }
  },
  computed: {
    // 合同类型
    contractTypes () {
      return getDict('payment-contract-type')
    }
  },
  methods: {
    // 数据请求
    queryData (params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      if (requestData.signingDateStart == '') {
        delete requestData.signingDateStart
      }
      if (requestData.signingDateEnd == '') {
        delete requestData.signingDateEnd
      }
      getContractList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.tableData = records
        this.params = requestData
        this.pager = { total, current, size }
      }).finally(() => {
        this.loading = false
      })
    },
    // 菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case 'add':
          this.$refs.dialog.show({ type: 'add' })
          break;
        case 'delete':
          let ids = this.selectDataArr.map((sd) => sd.paymentContractId);
          this.deleteData(ids);
          break;
        case 'export':
          this.publicExport('其他付款合同记录', '/api/payment/contract/export', this.params, 'xls')
          break;
        default:
          this.$message(type)
          break;
      }
    },
    //表格按钮点击事件监听
    handleBtnClick (type, row = {}) {
      switch (type) {
        case 'preview':
        case 'edit':
          this.$refs.dialog.show({ type, data: JSON.parse(JSON.stringify(row)) })
          break;
        case 'delete':
          this.deleteData([row.paymentContractId]);
          break;
        default:
          break;
      }
    },
    // 删除数据
    async deleteData (data) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await deleteContract(data);
        if (res.data.code === 0) {
          this.$message.success("删除成功!")
        }
        this.queryData({ current: 1 })
      }).catch(() => {
        //this.$message.info("已取消删除");
      });
    },
    // 格式化
    dataFormatter (row, column, cellValue) {
      switch (column.property) {
        case 'signingDate': // 签订日期
          return cellValue ? cellValue.split(' ')[0] : '';
        case 'contractType': // 合同类型
          let type = this.contractTypes.find(item => item.value == cellValue)
          return type ? type.label : '';
        case 'time': // 合同期限
          const { contractDeadlineStart, contractDeadlineEnd } = row
          return contractDeadlineStart && contractDeadlineEnd ? `${contractDeadlineStart.replace(/\s.+$/, '')} - ${contractDeadlineEnd.replace(/\s.+$/, '')}` : '';
        default:
          break;
      }
    },
  }
}
</script>
